const history = window.history

const lis = document.querySelectorAll('li')

const Movie = () => {
  view.innerHTML = `
    <div>电影列表</div>
  `
}
const Theater = () => {
  view.innerHTML = `
    <div>影院列表</div>
  `
}

function render() {
  let pathname = location.pathname

  switch(pathname) {
    case '/':
    case '/movie':
      // history.pushState({id: 2}, '', '/movie')
      Movie()
      break;
    case '/theater':
      // history.pushState({id: 2}, '', '/theater')
      Theater()
      break;
    default:
      break;
  }
}

// popstate, 在浏览器的前进后退按钮被点击的时候触发
window.addEventListener('popstate', () => {
  render()
}, false)

document.querySelector('#back').addEventListener('click', () => {
  history.back()
}, false)

document.querySelector('#go').addEventListener('click', () => {
  history.go(1)
  console.log(history.state)
}, false)

lis.forEach((li, index) => {
  li.addEventListener('click', () => {
    const to = li.getAttribute('to')
    history.pushState({id: 2}, '', to)
    render()
  }, false)
})